<template>
  <div class="SelectTree">
    <x-input @on-enter="searchCityHandle" @on-change="searchCityHandle()" style="flex: 0 0 auto;" :debounce="100" v-model="searchCity" placeholder="输入地址">
      <i slot="label" @click="searchCityHandle()" style="margin-right: 10px" class="fa fa-search"></i>
    </x-input>
    <tab v-if="(tabNameList.length > 1)&&(searchCity === null||searchCity === '')" active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in tabNameList" :key="index" :selected="index===currentIndex">
        <span>{{ item }}</span>
      </tab-item>
    </tab>
    <ul key="1" v-if="searchCity === null||searchCity === ''">
      <li v-for="(item,index) in swiperList[currentIndex]" @click="getCityByParent(item)" :key="index">
        {{item.name}}
      </li>
    </ul>
    <ul key="2" v-else="searchCity === null||searchCity === ''">
      <li v-for="(item,index) in searchList" @click="searchChoice(item)" :key="index">
        {{item.mergerName}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {Tab, TabItem, XInput, Swiper, SwiperItem,} from 'vux'

  export default {
    name: "SelectTree",
    components: {
      Tab,
      TabItem,
      XInput, Swiper, SwiperItem,
    },
    data() {
      return {
        searchCity: '',
        currentIndex: -1,
        tabNameList: [],
        swiperList: [],
        searchList:[],
      }
    },
    created() {
      this.getCityByParent()
    },
    mounted() {
    },
    methods: {
      searchChoice(item){
        this.$emit('checkCity', item);
      },
      searchCityHandle() {
        if(!this.searchCity) return;
        this.$http.get("/account/api/region", {
          params: {
            mergerNameSplit: this.searchCity,
            include: true,
            pageSize: 20,
            levelSort: 'desc',
            fields: 'mergerName,level,cityLevel'
          }
        }).then(res => {
          if (res.data.data) {
            this.searchList = res.data.data.rows;
          }
        });
      },
      getCityByParent(item = {code: 86, name: '请选择'}) {
        //获取子节点信息
        this.$http.get('/account/api/region/child', {params: {
            code: item.code,
            include: true,
            fields: 'level,name,parentShortCode,code,mergerName,cityLevel'}}).then(res => {
            // 下级无数据就不展示,并默认选择该条数据，选择‘暂不选择’默认选择上级
            if (res.data.data.length == 0||item.name=='选择上级') {
              this.$emit('checkCity', item);
              return
            }
            //tabName显示逻辑
            this.tabNameList.splice(this.currentIndex + 1, this.tabNameList.length);

            if(this.tabNameList.length == 0 ){
              this.tabNameList.push(item.name);
            }else{
              this.tabNameList.pop();
              this.tabNameList.push(item.name);
              this.tabNameList.push('请选择');
              res.data.data.unshift({...item,name:'选择上级'})
            }
            // 内容显示逻辑
            this.swiperList.splice(this.currentIndex + 1, this.swiperList.length);
            this.swiperList.push(res.data.data);
            // 移动到下一个节点
            this.currentIndex++;
          }
        )
      },
    },
  }
</script>

<style lang="less">
  .SelectTree {
    display: flex;
    flex-direction: column;
    .vux-x-input{

    }
    ul{
      overflow:auto;
      width: 100%;
      background-color: #fff;
      flex: 1 1 auto;
      li{
        list-style: none;
        line-height: 0.35rem;
        font-size: 0.15rem;
        padding: 0 20px;
      }
    }
  }
</style>
